<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tic Tac Toe</title>

<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script>
	var currentSign = 'O';
	var firstMove = true;
	var id;
	var next;
	var current;
	var freeBee = false;
	var turn = true;
	
	function checkTurn() {
	    setInterval(function(){ 
	    	$.ajax({
				type : "POST",
				url : "checkMove",
				//data: { cellID: id},
				success : function(result) {
					if (result != null || result != '') {
						var oppId='#'+result;
						if($.trim($(oppId).html()) == ''){
							id=result;
							playMove();
							turn=true;
						}
					}
				}
			});
 }
	    , 3000);
	}

	$(document)
			.ready(
					checkTurn(),
					function() {
						$("div.childBox")
								.click(
										function(){
											id = $(this).attr('id');
											if (firstMove
													&& (id == '11'
															|| id == '22'
															|| id == '33'
															|| id == '44'
															|| id == '55'
															|| id == '66'
															|| id == '77'
															|| id == '88' || id == '99')) {

												alert("Game cannot be started from home cell.");

											}else if (firstMove
													|| '#' + id.substring(0, 1) == next
													|| freeBee || turn) {
												playMove();
												$.ajax({
													type : "POST",
													url : "move",
													data: { cellID: id},
													success : function(result) {
														if (result == null || result == '') {
															document.forms[0].action = 'logout';
															document.forms[0].submit();
															return;
														}
														 turn = false;
													}
												});
											}
											
											
										});
								
					});
	
	function palyMove(){
		firstMove = false;

		if ($.trim($(this).html()) == '') {

			if (currentSign == 'X') {

				$(this).text('O');

				currentSign = 'O';
			} else {

				$(this).text('X');

				currentSign = 'X';
			}
			checkStrike(id);
			var pos = id
					.substring(1, 2);
			next = '#' + pos;
			freeBee = isNextFull(next);
			current = '#'
					+ id
							.substring(
									0,
									1);
			if (!freeBee) {

				for (var i = 1; i <= 9; i++) {
					$('#' + i)
							.removeClass(
									'next');
					$('#' + i)
							.addClass(
									'parentBox');
				}
				$(next)
						.addClass(
								'next');
			} else {

				for (var i = 1; i <= 9; i++) {
					$('#' + i)
							.addClass(
									'next');
				}

			}

		}
	}
	 
	function isNextFull(next) {

		var full = true;
		for (var i = 1; i <= 9; i++) {

			if ($(next + i).html() == '') {
				full = false;
				break;
			}
		}
		return full;
	}

	function checkStrike(b) {
		//var currentCell = parseInt(b);
		checkHorizontal(b);
		checkVertical(b);
		checkDiagonal(b);
	}

	function checkHorizontal(b) {
		var p = b.substring(0, 1);

		if (($('#' + p + 1).html() == $('#' + p + 2).html())
				&& ($('#' + p + 2).html() == $('#' + p + 3).html())
				&& ($('#' + p + 3).html() == currentSign)
				&& (b == (p + 1) || b == (p + 2) || b == (p

				+ 3))) {

			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));

		}
		if (($('#' + p + 4).html() == $('#' + p + 5).html())
				&& ($('#' + p + 5).html() == $('#' + p + 6).html())
				&& ($('#' + p + 6).html() == currentSign)
				&& (b == (p + 4) || b == (p + 5) || b == (p

				+ 6))) {
			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));
		}
		if (($('#' + p + 7).html() == $('#' + p + 8).html())
				&& ($('#' + p + 8).html() == $('#' + p + 9).html())
				&& ($('#' + p + 9).html() == currentSign)
				&& (b == (p + 7) || b == (p + 8) || b == (p

				+ 9))) {
			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));
		}
	}

	function checkVertical(b) {
		var p = b.substring(0, 1);

		if (($('#' + p + 1).html() == $('#' + p + 4).html())
				&& ($('#' + p + 4).html() == $('#' + p + 7).html())
				&& ($('#' + p + 7).html() == currentSign)
				&& (b == (p + 1) || b == (p + 2) || b == (p

				+ 3))) {
			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));
		}
		if (($('#' + p + 2).html() == $('#' + p + 5).html())
				&& ($('#' + p + 5).html() == $('#' + p + 8).html())
				&& ($('#' + p + 8).html() == currentSign)
				&& (b == (p + 2) || b == (p + 5) || b == (p

				+ 8))) {
			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));
		}
		if (($('#' + p + 3).html() == $('#' + p + 6).html())
				&& ($('#' + p + 6).html() == $('#' + p + 9).html())
				&& ($('#' + p + 9).html() == currentSign)
				&& (b == (p + 3) || b == (p + 6) || b == (p

				+ 9))) {
			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));
		}
	}

	function checkDiagonal(b) {
		var p = b.substring(0, 1);

		if (($('#' + p + 1).html() == $('#' + p + 5).html())
				&& ($('#' + p + 5).html() == $('#' + p + 9).html())
				&& ($('#' + p + 9).html() == currentSign)
				&& (b == (p + 1) || b == (p + 5) || b == (p

				+ 9))) {
			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));
		}
		if (($('#' + p + 3).html() == $('#' + p + 5).html())
				&& ($('#' + p + 5).html() == $('#' + p + 7).html())
				&& ($('#' + p + 7).html() == currentSign)
				&& (b == (p + 3) || b == (p + 5) || b == (p

				+ 7))) {
			$('#' + currentSign + 'Score').text(
					(parseInt($('#' + currentSign + 'Score').html()) + 1));
		}

	}
</script>
<style>
.body {
	background-color: pink;
}

#mainContainer {
	width: 950px;
	height: 650px;
	position: absolute;
	top: 110px;
	left: 150px;
	background-color: #ABABAB;
	box-shadow: 10px 10px 5px #888888;
}

#gameContainer {
	position: absolute;
	top: 70px;
	left: 240px;
	width: 510px;
	height: 510px;;
	background-color: #EFFFBA;
	padding-left: 10px;
	padding-top: 10px;
	float: left;
}

.pHead {
	color: blue;
	text-align: center;
	text-decoration: none;
	font-family: "Verdana", Sans-serif;
	font-style: normal;
	font-size: 50px;
	float: left;
	padding-top: 50px;
	width: 50px;
}

.score {
	color: black;
}

#p1 {
	margin-left: 120px;
}

#p2 {
	margin-left: 650px;
}

.upperLeft {
	border-right: 4px solid black;
	border-bottom: 4px solid black;
}

.upperCenter {
	border-bottom: 4px solid black;
}

.upperRight {
	border-left: 4px solid black;
	border-bottom: 4px solid black;
}

.middleLeft {
	border-right: 4px solid black;
}

.middleCenter {
	
}

.middleRight {
	border-left: 4px solid black;
}

.lowerLeft {
	border-right: 4px solid black;
	border-top: 4px solid black;
}

.lowerCenter {
	border-top: 4px solid black;
}

.lowerRight {
	border-left: 4px solid black;
	border-top: 4px solid black;
}

.cUpperLeft {
	border-right: 2px solid black;
	border-bottom: 2px solid black;
}

.cUpperCenter {
	border-bottom: 2px solid black;
}

.cUpperRight {
	border-left: 2px solid black;
	border-bottom: 2px solid black;
}

.cMiddleLeft {
	border-right: 2px solid black;
}

.cMiddleCenter {
	
}

.cMiddleRight {
	border-left: 2px solid black;
}

.cLowerLeft {
	border-right: 2px solid black;
	border-top: 2px solid black;
}

.cLowerCenter {
	border-top: 2px solid black;
}

.cLowerRight {
	border-left: 2px solid black;
	border-top: 2px solid black;
}

.parentBox {
	width: 160px;
	height: 160px;
	background-color: #EFFFBA;
	position: relative;
	float: left;
	padding-top: 5px;
	padding-left: 5px;
}

.childBox {
	width: 50px;
	height: 45px;
	position: relative;
	float: left;
	cursor: pointer;
	text-align: center;
	padding-top: 5px;
}

.next {
	background-color: #E97940;
}
</style>

</head>
<body class="body">
	<div id="mainContainer">

		<div id="p1" class="pHead">
			<span style="border-bottom: 1px solid blue;">X</span> <span
				id="XScore" class="score">0</span>
		</div>

		<div id="gameContainer">

			<div id="1" class="upperLeft parentBox">
				<div id="11" class="cUpperLeft childBox"></div>
				<div id="12" class="cUpperCenter childBox"></div>
				<div id="13" class="cUpperRight childBox"></div>
				<div id="14" class="cMiddleLeft childBox"></div>
				<div id="15" class="cMiddleCenter childBox"></div>
				<div id="16" class="cMiddleRight childBox"></div>
				<div id="17" class="cLowerLeft childBox"></div>
				<div id="18" class="cLowerCenter childBox"></div>
				<div id="19" class="cLowerRight childBox"></div>
			</div>

			<div id="2" class="upperCenter parentBox">
				<div id="21" class="cUpperLeft childBox"></div>
				<div id="22" class="cUpperCenter childBox"></div>
				<div id="23" class="cUpperRight childBox"></div>
				<div id="24" class="cMiddleLeft childBox"></div>
				<div id="25" class="cMiddleCenter childBox"></div>
				<div id="26" class="cMiddleRight childBox"></div>
				<div id="27" class="cLowerLeft childBox"></div>
				<div id="28" class="cLowerCenter childBox"></div>
				<div id="29" class="cLowerRight childBox"></div>
			</div>

			<div id="3" class="upperRight parentBox">
				<div id="31" class="cUpperLeft childBox"></div>
				<div id="32" class="cUpperCenter childBox"></div>
				<div id="33" class="cUpperRight childBox"></div>
				<div id="34" class="cMiddleLeft childBox"></div>
				<div id="35" class="cMiddleCenter childBox"></div>
				<div id="36" class="cMiddleRight childBox"></div>
				<div id="37" class="cLowerLeft childBox"></div>
				<div id="38" class="cLowerCenter childBox"></div>
				<div id="39" class="cLowerRight childBox"></div>
			</div>

			<div id="4" class="middleLeft parentBox">
				<div id="41" class="cUpperLeft childBox"></div>
				<div id="42" class="cUpperCenter childBox"></div>
				<div id="43" class="cUpperRight childBox"></div>
				<div id="44" class="cMiddleLeft childBox"></div>
				<div id="45" class="cMiddleCenter childBox"></div>
				<div id="46" class="cMiddleRight childBox"></div>
				<div id="47" class="cLowerLeft childBox"></div>
				<div id="48" class="cLowerCenter childBox"></div>
				<div id="49" class="cLowerRight childBox"></div>
			</div>

			<div id="5" class="middleCenter parentBox">
				<div id="51" class="cUpperLeft childBox"></div>
				<div id="52" class="cUpperCenter childBox"></div>
				<div id="53" class="cUpperRight childBox"></div>
				<div id="54" class="cMiddleLeft childBox"></div>
				<div id="55" class="cMiddleCenter childBox"></div>
				<div id="56" class="cMiddleRight childBox"></div>
				<div id="57" class="cLowerLeft childBox"></div>
				<div id="58" class="cLowerCenter childBox"></div>
				<div id="59" class="cLowerRight childBox"></div>
			</div>

			<div id="6" class="middleRight parentBox">
				<div id="61" class="cUpperLeft childBox"></div>
				<div id="62" class="cUpperCenter childBox"></div>
				<div id="63" class="cUpperRight childBox"></div>
				<div id="64" class="cMiddleLeft childBox"></div>
				<div id="65" class="cMiddleCenter childBox"></div>
				<div id="66" class="cMiddleRight childBox"></div>
				<div id="67" class="cLowerLeft childBox"></div>
				<div id="68" class="cLowerCenter childBox"></div>
				<div id="69" class="cLowerRight childBox"></div>
			</div>

			<div id="7" class="lowerLeft parentBox">
				<div id="71" class="cUpperLeft childBox"></div>
				<div id="72" class="cUpperCenter childBox"></div>
				<div id="73" class="cUpperRight childBox"></div>
				<div id="74" class="cMiddleLeft childBox"></div>
				<div id="75" class="cMiddleCenter childBox"></div>
				<div id="76" class="cMiddleRight childBox"></div>
				<div id="77" class="cLowerLeft childBox"></div>
				<div id="78" class="cLowerCenter childBox"></div>
				<div id="79" class="cLowerRight childBox"></div>
			</div>

			<div id="8" class="lowerCenter parentBox">
				<div id="81" class="cUpperLeft childBox"></div>
				<div id="82" class="cUpperCenter childBox"></div>
				<div id="83" class="cUpperRight childBox"></div>
				<div id="84" class="cMiddleLeft childBox"></div>
				<div id="85" class="cMiddleCenter childBox"></div>
				<div id="86" class="cMiddleRight childBox"></div>
				<div id="87" class="cLowerLeft childBox"></div>
				<div id="88" class="cLowerCenter childBox"></div>
				<div id="89" class="cLowerRight childBox"></div>
			</div>

			<div id="9" class="lowerRight parentBox">
				<div id="91" class="cUpperLeft childBox"></div>
				<div id="92" class="cUpperCenter childBox"></div>
				<div id="93" class="cUpperRight childBox"></div>
				<div id="94" class="cMiddleLeft childBox"></div>
				<div id="95" class="cMiddleCenter childBox"></div>
				<div id="96" class="cMiddleRight childBox"></div>
				<div id="97" class="cLowerLeft childBox"></div>
				<div id="98" class="cLowerCenter childBox"></div>
				<div id="99" class="cLowerRight childBox"></div>
			</div>

		</div>
		<div id="p2" class="pHead">
			<span style="border-bottom: 1px solid blue;">O</span> <span
				id="OScore" class="score">0</span>
		</div>
	</div>

</body>

</html>